<template>
  <div class="basic_wrap">
    <bsHeader
      :title="title"
      @backurl="$router.back()"
    />
    <div class="top_div">
      <div class="title_box">
        <div class="title">
          {{ title }}
        </div>
        <div class="price flex_center">
          <div class="price1">
            <div class="price11 upcolor">
              4600.23
            </div>
            <div class="price12 downColor">
              +2.3%
            </div>
          </div>
          <div class="price2">
            <div class="price21 flex_center">
              <p>最高</p>
              <p>4700.14</p>
            </div>
            <div class="price21 flex_center">
              <p>最第</p>
              <p>4500.14</p>
            </div>
            <div class="price21 flex_center">
              <p>24小时</p>
              <p>4500.14</p>
            </div>
          </div>
        </div>
      </div>
      <div class="flex_center btns_box">
        <div
          class="btn"
          :class="active==1?'btn_active':''"
          @click="change(1)"
        >
          1天
        </div>
        <div
          class="btn"
          :class="active==2?'btn_active':''"
          @click="change(2)"
        >
          1周
        </div>
        <div
          class="btn"
          :class="active==3?'btn_active':''"
          @click="change(3)"
        >
          1个月
        </div>
        <div
          class="btn"
          :class="active==4?'btn_active':''"
          @click="change(4)"
        >
          6个月
        </div>
        <div
          class="btn"
          :class="active==5?'btn_active':''"
          @click="change(5)"
        >
          1年
        </div>
      </div>
      <div
        id="mychart"
        class="echart"
        style="width:100%; height: 370px;"
      />
			
      <!-- 新闻资讯 -->
      <div class="currency_tips">
        新闻资讯
      </div>
      <div class="block_div news_box">
        <div class="item">
          <van-cell
            v-for="(item,index) in news"
            :key="index"
            is-link
            @click="$router.push('article/'+item.id)"
          >
            <template #title>
              <div class="custom-title">
                {{ item.title }}
              </div>
              <div class=" time">
                {{ item.time }}
              </div>
            </template>
          </van-cell>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
	import Vue from 'vue';
	import bsHeader from '../../components/bsHeader.vue'
	import Fetch from '../../utils/fetch'
	import * as echarts from 'echarts';
	import {
		Cell,
		CellGroup
	} from "vant";
	
	Vue.use(Cell).use(CellGroup);
	
	export default {
		name: "Product",
		components: {
			bsHeader
		},
		data() {
			return {
				data: [],
				title: "XAU/USD",
				upcolor: "#FF0000", //增长颜色
				upBorderColor: "#8A0000",
				downColor: "#008000", // 下跌颜色
				downBorderColor: "#008F28",
				klineData: [], //k线图数据
				hourData: [], //charts表格小时数据
				xData: [],
				culomnColor: [], //颜色
				culomnValue: [],
				active: 1,
				news: [],
			};
		},
		created() {
			if (window.plus) {
				plus.navigator.setStatusBarBackground('#FFFFFF');
				plus.navigator.setStatusBarStyle('dark');
			}
			this.$parent.footer('user', false);
		},
		mounted() {
			// 数据初始化
			this.initData();
		this.start();
		},
		methods: {
			change(num) {
				this.active = num;
			},
			start() {
				Fetch('/index/newsList').then(r => {
					this.news = r.data;
				})
			},
			initData() {
				Fetch('/index/puoduct_detail').then(r => {
					this.klineData = r.data;
					this.hourData = this.splitData(this.klineData);
					this.initxData();
					// 图标初始化
					this.initEcharts();
				})
			},
			initEcharts() {
				const option = {
					title: {
						left: 0
					},
					tooltip: {
						trigger: "axis",
						axisPointer: {
							type: "cross" //十字准星指示器
						},
						borderWidth: 1,
						backgroundColor: "#f3f5fb",
						padding: 10,
						textStyle: {
							color: "#000"
						},
						formatter: function(param) {
							param = param[0];
							return [
								"时间: " + param.data[6] + "<br/>",
								"价格: " + "<span style='color:#008000'>" + param.data[1] + "</span><br/>",
								"涨跌额: " + param.data[2] + "<br/>",
								"成交量: " + param.data[3] + "<br/>",
								"涨跌幅: " + param.data[4] + "<br/>"
							].join("");
						}
					},

					visualMap: {
						type: "piecewise",
						show: false, //不展示map，只应用对应颜色划分逻辑
						seriesIndex: 1, //指定取哪个系列的数据
						dimension: 2,
						// 定义每一段的颜色
						pieces: [{
								value: -1,
								color: this.downColor
							},
							{
								value: 1,
								color: this.upcolor
							}
						]
					},
					// 图像位置配置
					grid: [{
							left: "15%",
							right: "10%",
							top: "5%",
							height: "70%"
						},
						{
							left: "5%",
							right: "5%",
							top: "72%",
							height: "24%",
						}
					],
					// 横坐标数据
					xAxis: [
						// 折线图
						{
							type: "category",
							data: this.xData,
							boundaryGap: false,
							axisLine: {
								onZero: false
							},
							splitLine: {
								show: false
							},
							min: "dataMin",
							max: "dataMax"
						},
						// 柱状图
						{
							type: "category",
							gridIndex: 1, //x 轴所在的 grid 的索引，默认位于第一个 grid。
							data: this.xData,
							boundaryGap: false,
							axisLine: {
								onZero: false
							},
							axisTick: {
								show: false
							},
							splitLine: {
								show: false
							},
							axisLabel: {
								show: false
							},
							min: "dataMin",
							max: "dataMax"
						}
					],
					// 纵坐标配置
					yAxis: [{
							scale: true,
							splitArea: {
								show: true
							}
						},
						{
							scale: true,
							gridIndex: 1, // y 轴所在的 grid 的索引，默认位于第一个 grid
							splitNumber: 2,
							axisLabel: {
								show: false
							},
							axisLine: {
								show: false
							},
							axisTick: {
								show: false
							},
							splitLine: {
								show: false
							}
						}
					],
					dataZoom: [{
							type: "inside",
							xAxisIndex: [0, 1],
							start: 90, //展示的数据范围，默认为50%-100%
							end: 100
						},
						{
							show: false,
							xAxisIndex: [0, 1],
							type: "slider",
							top: "90%",
							start: 90, //展示的数据范围，默认为50%-100%
							end: 100
						}
					],
					series: [{
							type: "line",
							data: this.hourData,
							symbol: "none", //无标记图案
							lineStyle: {
								width: 1
							},
							areaStyle: {
								normal: {
									color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
												offset: 0,
												color: 'rgb(1, 103, 255)',
											},
											{
												offset: 1,
												color: 'rgb(1, 103, 255, 0.1)',
											},
										],
										false
									),
								},
							},
						},
						{
							name: "Volume",
							type: "bar",
							xAxisIndex: 1,
							yAxisIndex: 1,
							data: this.culomnValue
						}

					]
				};
				const myChart = echarts.init(document.getElementById("mychart"));
				myChart.setOption(option);
				//随着屏幕大小调节图表
				window.addEventListener("resize", () => {
					myChart.resize();
				});
			},
			// 横坐标数据处理
			initxData() {
				for (let i = 0; i < this.klineData.length; i++) {
					this.xData[i] = this.klineData[i].datetime;
				}

				this.initCulomnColor();
			},
			// 初始化交易数据和交易柱状图颜色参数
			initCulomnColor() {
				this.culomnColor[0] = this.klineData[0].increase > 0 ? 1 : -1;
				this.culomnValue[0] = [0, this.klineData[0].volume, -1];
				for (let i = 1; i < this.klineData.length; i++) {
					this.culomnColor[i] =
						this.klineData[i].price > this.klineData[i - 1].price ? 1 : -1;
					this.culomnValue[i] = [
						i,
						this.klineData[i].volume,
						this.culomnColor[i]
					];
				}
			},
			// 数据计算以及拆分，将json数据转为数组数据
			splitData(jsonData) {
				const hourData = [];

				for (let i = 0; i < jsonData.length; i++) {

					hourData.push([
						i,
						jsonData[i].price,
						jsonData[i].increase,
						jsonData[i].volume,
						jsonData[i].ratio,
						jsonData[i].amount,
						jsonData[i].datetime
					]);
				}
				return hourData;
			}
		}
	};
</script>

<style lang="less" scoped>
	.top_div {
		margin-top: 55px;
		
		.title_box{
			padding: 20px;
			.title{
				font-size: 18px;
				font-weight: bold;
				margin-bottom: 10px;
			}
			.price {
				line-height: 1.5;
				
				.price1{
					.price11{
						font-size: 16px;
						font-weight: 400;
					}
				}
				.price2{
					width: 40%;
				}
			}
		}

		.btns_box {
			justify-content: left;
			margin-left: 20px;

			.btn {
				padding: 6px 10px;
				background: #f5f5f5;
				margin-right: 15px;
				border-radius: 8px;
			}

			.btn_active {
				color: #0000FF;
				background: #ecf0fe;
			}
		}
		
		.currency_tips {
			margin-bottom: 10px;
			margin-left: 3%;
			border-left: 5px solid #0F6EFF;
			padding-left: 10px;
			font-size: 14px;
			font-weight: bold;
		}
		.news_box {
			margin-bottom: 15px;
		
			.item {
				.time {
					color: #999;
					font-size: 12px;
				}
			}
		}
		
	}
	.upcolor{
		color: #FF0000;
	}
	.downColor{
		color: #008000;
	}
</style>
